import 'element-ui/lib/theme-default/SoftWare.css'

<template>
  <div class="body">
      <div id="software">
        <div class="header">
          <div class="nav">
            <ul @click="router_click">
              <li v-for="item in indexRouter" >
                <span :router="item.router">{{ item.text }}</span>
              </li>
            </ul>
          </div>
          <div class="user">
            <div class="register_login" v-show="is_register_login_show">
              <span class="nav-login" @click="clerk_login">登录</span>
              |
              <span class="nav-register" @click="clerk_register">注册</span>
            </div>
            <div class="login_user" v-show="is_login_user_show">{{userID}}, 你好</div>
          </div>
        </div>

        <div id="login_page" v-show="is_login_show" @mousewheel.prevent>
          <div id="login" >
            <h1>欢迎使用</h1>
            <i class="icon-cross login_register_close" @click="login_register_close"></i>
            <input class="input_message" placeholder="输入邮箱" type="text" v-model="mail" ref="mail"></input>
            <i :class="mail_icon" :style="mail_flag_get_style()" :title="mail_icon_title" ></i>
            <input class="input_message" placeholder="输入密码" type="password" v-model="password"></input>
            <i :class="password_icon" :style="password_flag_get_style()" :title="password_icon_title"></i>
            <button  class="cursor_register_login" :style="login_button_get_style()" @click="Login">登录</button>
            <span @click="clerk_register">邮箱注册</span>
          </div>
        </div>

        <div id="register_page" v-show="is_register_show" @mousewheel.prevent>
          <div id="register">
            <h1>邮箱注册</h1>
            <i class="icon-cross login_register_close" @click="login_register_close"></i>
            <input class="input_message" placeholder="输入邮箱" type="text" v-model="mail"></input>
            <i :class="mail_icon" :style="mail_flag_get_style()" :title="mail_icon_title" ></i>

            <input class="input_message" placeholder="设置昵称" type="text" v-model="nickname" maxlength="8"></input>
            <i :class="nickname_icon" :style="nickname_flag_get_style()" :title="nickname_icon_title" ></i>

            <input class="input_message" placeholder="设置密码" type="password" v-model="password"></input>
            <i :class="password_icon" :style="password_flag_get_style()" :title="password_icon_title"></i>

            <input class="input_message" placeholder="重复密码" type="password" v-model="password_repeat"></input>
            <i :class="password_repeat_icon" :style="password_repeat_flag_get_style()" :title="password_repeat_icon_title"></i>

            <input class="verification input_message" placeholder="输入验证码" type="text" v-model="verification" maxlength="6" oninput="value=value.replace(/\D/g,'')"></input>
            <button class="verification_send" :style="verification_send_get_style()" @click="getAuthCode">{{verification_send_content}}</button>

            <div class="identify_radio identify_radio1">
              <input class="identify" type="radio" name="identify" value="1" id="identify1" checked>
              <label for="identify1" class="identify_label">面试者</label>
            </div>
            <div class="identify_radio identify_radio2">
              <input class="identify" type="radio" name="identify" value="2" id="identify2">
              <label for="identify2" class="identify_label">面试官</label>
            </div>

            <button class="cursor_register_login" :style="register_button_get_style()" @click="Register">注册</button>
            <span @click="clerk_login">密码登录</span>
          </div>
        </div>
      <router-view ></router-view>
    </div>
  </div>
</template>

<script>
export default{
  name:"softWare",
  data(){
    return {
      user:{
        "18634936606@163.com": '123456'
      },
      indexRouter: [
        {
          id: 0,
          text: "首页",
          router: "/"
        },
        {
          id: 1,
          text: "题目列表",
          router: "/problems_list"
        },
        {
          id: 2,
          text: "留言",
          router: "/problems_list"
        }
      ],
      is_register_login_show:true,
      is_login_user_show:'',
      is_login_show:false,
      is_register_show:false,
      isMailCheckShow:false,
      mail_icon:'',
      password_icon:'',
      nickname_icon:'',
      password_repeat_icon:'',
      verification_icon:'',
      mail:'',
      nickname:'',
      password:'',
      password_repeat:'',
      verification:'',
      verification_send_content:'发送验证码',
      verificationFlag:1,
      nickname_icon_title:'',
      password_icon_title:'',
      password_repeat_icon_title:'',
      mail_icon_title:'',
      userID:'',
    }
  },
  methods: {
    router_click(e){
      let dom = e.target;

      if (e.target.nodeName.toLowerCase() === "span") {
        let router = dom.getAttribute("router")
        this.$router.push(router)
      }
    },

    clerk_login: function () {
      this.is_login_show = true
      this.is_register_show = false
      this.mail = ''
      this.password = ''
      this.password_repeat = ''
      this.verification = ''
    },

    clerk_register: function () {
      this.is_register_show = true
      this.is_login_show = false
      this.mail = ''
      this.password = ''
      this.password_repeat = ''
      this.verification = ''
    },

    login_register_close: function () {
      this.is_register_show = false
      this.is_login_show = false
      this.mail = ''
      this.password = ''
      this.password_repeat = ''
      this.verification = ''
    },

    mail_flag_get_style: function () {
      if (this.mail.match(/^([a-zA-Z]|[0-9])(\w|)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/)) {
        this.mail_icon = 'icon-checkmark'
        this.mail_icon_title = ''
        return {display: 'inline'}
      } else if (this.mail.length > 0) {
        this.mail_icon = 'icon-cross'
        this.mail_icon_title = '不符合邮箱格式'
        return {display: 'inline'}
      } else {
        return {display: 'none'}
      }
    },

    nickname_flag_get_style:function (){
      if (this.nickname.match(/^[a-z0-9A-Z\u4e00-\u9fa5]+$/gi)) {
        this.nickname_icon = 'icon-checkmark'
        this.nickname_icon_title = ''
        return {display: 'inline'}
      } else if (this.nickname.length > 0) {
        this.nickname_icon = 'icon-cross'
        this.nickname_icon_title = '用户名只允许英文，数字和汉字组合'
        return {display: 'inline'}
      } else {
        return {display: 'none'}
      }
    },

    password_flag_get_style: function () {
      if (this.password.length >= 6) {
        this.password_icon = 'icon-checkmark'
        this.password_icon_title = ''
        return {display: 'inline'}
      } else if ((this.password.length < 6) && (this.password.length > 0)) {
        this.password_icon = 'icon-cross'
        this.password_icon_title = '密码位数至少为6位'
        return {display: 'inline'}
      } else {
        return {display: 'none'}
      }
    },

    password_repeat_flag_get_style: function () {
      if (this.password === this.password_repeat && this.password.length > 0) {
        this.password_repeat_icon = 'icon-checkmark'
        this.password_repeat_icon_title = ''
        return {display: 'inline'}
      } else if (this.password !== this.password_repeat && this.password_repeat.length > 0) {
        this.password_repeat_icon = 'icon-cross'
        this.password_repeat_icon_title = '重复密码不匹配'
        return {display: 'inline'}
      } else {
        return {display: 'none'}
      }
    },

    login_button_get_style: function () {
      if ((this.mail_icon === 'icon-checkmark') && (this.password_icon === 'icon-checkmark')) {
        return {
          backgroundColor: "rgba(46,181,61,1)",
          pointerEvents: "auto",
        }
      } else {
        return {
          backgroundColor: "rgba(196,196,196,1)",
          pointerEvents: "none"
        }
      }
    },

    register_button_get_style: function () {
      if ((this.mail_icon === 'icon-checkmark') && (this.password_icon === 'icon-checkmark') && (this.password_repeat_icon === 'icon-checkmark') && this.verification.length === 6) {
        return {
          backgroundColor: "rgba(46,181,61,1)",
          pointerEvents: "auto",
        }
      } else {
        return {
          backgroundColor: "rgba(196,196,196,1)",
          pointerEvents: "none"
        }
      }
    },

    verification_send_get_style: function () {
      if (this.mail_icon === 'icon-checkmark' && this.verificationFlag === 1) {
        return {
          borderColor: "rgba(46,181,61,1)",
          pointerEvents: "auto",
          color: "rgba(46,181,61,1)"
        }
      } else {
        return {
          borderColor: "rgba(196, 196, 196, 1)",
          pointerEvents: "none",
          color: "rgba(196, 196, 196, 1)"
        }
      }
    },

    getAuthCode: function () {
      this.auth_time = 60
      this.verificationFlag = 0
      this.verification_send_content = String(this.auth_time) + '秒后重发'
      this.verification_send_get_style()
      let auth_timeTimer = setInterval(() => {
        this.auth_time--;
        this.verification_send_content = String(this.auth_time) + '秒后重发'
        if (this.auth_time <= 0) {
          this.verification_send_content = '发送验证码'
          this.verificationFlag = 1
          this.verification_send_get_style()
          clearInterval(auth_timeTimer);
        }
      }, 1000);
    },

    Login: function () {
      if ((this.mail_icon === 'icon-checkmark') && (this.password_icon === 'icon-checkmark')) {
        for (const key in this.user) {
          if (this.mail === key && this.password === this.user[key]) {
            this.is_login_show = false
            this.is_register_login_show = false
            this.is_login_user_show = true
            this.userID = this.mail.split('@')[0]
          } else {
            alert('密码错误')
          }
        }
      }
    },

    Register: function () {
      this.$set(this.user, this.mail, this.password)
      this.is_register_show = false
      this.is_register_login_show = false
      this.is_login_user_show = true
      this.userID = this.mail.split('@')[0]
    },
  }
}
</script>

<style>
@import "./common/stylus/style.css";
@import "./assets/css/all.css";
@import "./assets/css/nav.css";
</style>